<template>
  <el-container>
    <el-header>
      <router-link :to="{ name: 'Home' }" class="gotohome"
        ><h1>前端题库网</h1></router-link
      >
      <router-link :to="{ name: 'Home' }" class="gotohome"
        >回到首页</router-link
      ></el-header
    >
    <el-main>
      <h2>收藏中心</h2>
      <div class="mainbox">
        <el-table :data="item" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item>
                  <span
                    ><span class="inbox">题目分类:</span>
                    {{ scope.row.cateName }}</span
                  >
                </el-form-item>
                <el-form-item>
                  <span
                    ><span class="inbox">题目考点:</span>
                    {{ scope.row.source }}</span
                  >
                </el-form-item>
                <el-form-item>
                  <span
                    ><span class="inbox">题目描述: </span>
                    {{ scope.row.titleDes }}</span
                  >
                </el-form-item>
                <el-form-item>
                  <span
                    ><span class="inbox">答案选项:</span> <strong> A: </strong>
                    {{ scope.row.answerA }} <strong> B: </strong
                    >{{ scope.row.answerB }} <strong> C: </strong>
                    {{ scope.row.answerC }}
                  </span>
                </el-form-item>
                <el-form-item>
                  <span
                    ><span class="inbox">正确答案:</span>
                    <strong class="red"> {{ scope.row.answerRight }}</strong>
                  </span>
                </el-form-item>
                <el-form-item>
                  <span
                    ><span class="inbox">答案描述:</span>
                    {{ scope.row.answerDes }}</span
                  >
                </el-form-item>
                <el-form-item>
                  <span
                    ><span class="inbox">难度:</span>
                    {{ scope.row.level }}</span
                  >
                </el-form-item>

                <el-form-item>
                  <el-button
                    @click="deleteItem(scope.row.id)"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="题目考点" prop="source"> </el-table-column>
          <el-table-column label="题目描述" prop="titleDes"> </el-table-column>
          <el-table-column label="答案描述" prop="answerDes"> </el-table-column>
        </el-table>
      </div>
    </el-main>
    <el-footer> xxx科技©2021 All rights reserved admin@xxxxxxxx.com </el-footer>
  </el-container>
</template>

<script>
import {apiGetCollectList,apiDeleteCollectItem} from "../api/collect";
export default {
  data() {
    return {
      item: [],
    };
  },
  created() {

    this.getList();
  },
    computed:{
    userinfo(){
      return this.$store.state.user.username
    }
  },
  methods: {
    async getList() {
      const res = await apiGetCollectList({ username: this.userinfo });
      this.item = res.data.data;
    },
    async deleteItem(id) {
      const res = await apiDeleteCollectItem(
       { id, username: this.userinfo },
      );

      if (res.data.state !== 200) {
        return this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
      this.getList();
    },
  },
};
</script>

<style scoped>
.el-container {
  width: 100vw;
  height: 100vh;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header h1 {
  margin-left: 20%;
  float: left;
  line-height: 50%;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  display: flex;

  justify-content: center;
  flex-wrap: wrap;
}
.mainbox {
  width: 60%;
  height: 80%;
}

.gotohome {
  color: black;
}

a {
  text-decoration: none;
}
h2 {
  width: 70%;
  text-align: center;
}
.el-form-item {
  text-align: left;
  width: 100%;
}

.el-form-item .inbox {
  display: inline-block;
  width: 100px;
  font-size: 20px;
  color: #99a9bf;
}
.el-form-item span {
  font-size: 16px;
}
.red {
  color: red;
}
</style>